<template>
	<view class="sub-account-add">
		<fixed-bottom>
			<template v-slot:top>
				<u-form>
					<cell-item title="账号" :value="subAccountData.form.username" :arrow="false" v-if="subAccountData.form.id"></cell-item>
					<u-input title="账号" placeholder="账号要求中文或数字，6-12位字符" :border="true" v-model="subAccountData.form.username" labelWidth="160" v-else></u-input>
					<cell-item title="姓名" :value="subAccountData.form.nickname" :arrow="false" v-if="subAccountData.form.id"></cell-item>
					<u-input title="姓名" placeholder="填写使用人姓名" :border="true" v-model="subAccountData.form.nickname" labelWidth="160" v-else></u-input>
					<u-input title="密码" placeholder="密码要求数字+字母，6-12位字符" :border="false" :password="!showPassword" labelWidth="160" v-model="subAccountData.form.password" v-if="!subAccountData.form.id">
						<template v-slot:icon>
							<view @click="changePasswordShow">
								<image v-if="!showPassword" src="@/static/icons/look_icon.png" class="password-icon"/>
								<image v-else src="@/static/icons/look_active_icon.png" class="password-active-icon"/>
							</view>
						</template>
					</u-input>
					<u-select :value="corporateData.permissionText" title="权限分配" placeholder="请选择" :border="false" :arrow="true" v-if="subAccountData.form.id" @click="changePopup" labelWidth="160"></u-select>
		<!-- 			<u-input title="备注" placeholder="填写备注" :border="false" v-model="subAccountData.form.remark" labelWidth="160" v-if="!subAccountData.form.id"></u-input> -->
				</u-form>
			</template>
			<template v-slot:bottom>
				<view class="bottom-btn">
					<button class="app-primary-button" hover-class="app-primary-button-active" @click="save">{{subAccountData.form.id?'返回':corporateData.query.id?'返回':'下一步'}}</button>
				</view>
			</template>
		</fixed-bottom>
		<u-popup :show="corporateData.showPopup" title="权限分配" @close="changePopup">
			<template v-slot:content>
				<view class="display-flex permission">
					<view class="left">
						<view @click="selectTopMenu(item, index)" :class="{'active':corporateDataItemActive === index}" class="display-flex left-item" v-for="(item, index) in corporateData.list" :key="item.id">
							<u-checkbox  color="#1769ff" :checked="item.checked" @change="changeMenu($event,item)" fontSize="28" :sizePercent="0.9"></u-checkbox>
							<view>{{item.label}}</view>
						</view>
					</view>
					<scroll-view scroll-y="true" class="right flex">
						<view class="right-item" v-for="(item, index) in corporateData.listChildren" :key="item.id">
							<view class="right-item-box display-flex justify-between align-center"  @click="selectMenu(index)">
								<view class="display-flex align-center">
									<u-checkbox  color="#1769ff" :checked="item.checked"  @change="changeMenu($event,item)" class="right-checkbox"  fontSize="28" :sizePercent="0.9"></u-checkbox>
									<text class="ml-10">{{item.label}}</text>
								</view>
								<image src="@/static/icons/right_arrow_light.png" class="right-arrow-light" :class="{'active':item.show}"/>
							</view>
							
							<view class="right-inner" v-show="item.show" v-for="item1 in item.children" :key="item1.id">
								<u-checkbox  color="#1769ff" :checked="item1.checked" @change="changeMenu($event,item1)" class="right-inner-checkbox" :name="item1.label" fontSize="28" :sizePercent="0.9"></u-checkbox>
							</view>
						</view>
					</scroll-view>
				</view>
			</template>
			<template v-slot:footer>
				<button class="app-primary-button" hover-class="app-primary-button-active" @click="sure">确定</button>
			</template>
		</u-popup>
	</view>
</template>

<script setup lang="ts">
	import { reactive, ref } from 'vue'
	import { auth } from '@/api'
	import { tip } from '@/utils'
	import type { SubAccountAddData } from '@/@type/user'
	import { onLoad } from '@dcloudio/uni-app';
	
	const showPassword = ref(false)
	const corporateDataItemActive = ref(0)
	const subAccountData: SubAccountAddData = reactive({
		form: {
			id:'',
			username:'',
			nickname:'',
			password:'',
			remark:''
		},
	})
	
	const corporateData: any = reactive({
		query:{
			id:''
		},
		list:[],
		listChildren:[],
		showPopup:false,
		checkedKeys:[],
		permissionText:''
	})
	
	onLoad((options:any) => {
		if(options.id) {
			uni.setNavigationBarTitle({
				title:'修改账号'
			})
			corporateData.query.id = subAccountData.form.id = options.id
			subAccountData.form.username = options.userName
			subAccountData.form.nickname = options.nickName
			corporate()
		} else {
			uni.setNavigationBarTitle({
				title:'新增账号'
			})
		}
		
	})
	
	const subUserMenu = () => {
		return new Promise((resolve:any) => {
			auth.updateSubUserMenu(corporateData.checkedKeys, corporateData.query).then((res:any) => {
				changePopup()
				resolve(res)
			})
		})
	}
	
	const corporate = () => {
		auth.getCorporate(corporateData.query).then((res:any) => {
			corporateData.checkedKeys = res.checkedKeys
			const menus = res.menus
			selectAll(menus,false, res.checkedKeys)
			corporateData.list = menus
			const listChildren = menus && menus[0].children
			for(let i in listChildren) {
				listChildren[i].show =false
			}
			corporateData.listChildren = listChildren
			
		})
	}
	
	const subAccountAdd = () => {
		if(!subAccountData.form.username) return tip.showToast('请输入账号')
		if(!subAccountData.form.nickname) return tip.showToast('请输入姓名')
		if(!subAccountData.form.password) return tip.showToast('请输入密码')
		auth.setSubAccountAdd(subAccountData.form).then((res: any) => {
			tip.showToast('保存成功，请分配权限！')
			corporateData.query.id = res.data.userId
			corporate()
			changePopup()
		})
	}
	
	const subAccountEdit = () => {
		if(!subAccountData.form.username) return tip.showToast('请输入账号')
		if(!subAccountData.form.nickname) return tip.showToast('请输入姓名')
		//if(!subAccountData.form.password) return tip.showToast('请输入密码')
		auth.setSubAccountEdit(subAccountData.form).then((res: any) => {
			tip.showToast('修改成功！')
			uni.$emit('subAccountAdd')
			uni.navigateBack({delta:1})
		})
	}

	const sure = () => {
		if(subAccountData.form.id) {
			subUserMenu().then(() => {})
		} else {
			subUserMenu().then(() => {
				uni.$emit('subAccountAdd')
				uni.navigateBack({delta:1})
			})
		}
		
	}
	
	const save = () => {
		if(subAccountData.form.id) {
			subAccountEdit()
		} else {
			if(corporateData.query.id) {
				uni.$emit('subAccountAdd')
				uni.navigateBack({delta:1})
			} else {
				subAccountAdd()
			}
		}
	}
	
	const selectTopMenu= (obj:any, index:number) => {
		corporateDataItemActive.value = index
		const listChildren = obj.children
		for(let i in listChildren) {
			listChildren[i].show =false
		}
		corporateData.listChildren = listChildren
		corporateData.listChildren = obj.children
	}
	
	const selectAll = (data:any, checked:boolean, keys?:Array<string>) => {
		for(let i in data) {
			if(keys && keys.length > 0) {
				if(keys.includes(data[i].id)) {
					data[i].checked = true
				} else {
					data[i].checked = false
				}
			} else {
				if(checked) {
					corporateData.checkedKeys.push(data[i].id)
				} else {
					const index = corporateData.checkedKeys.indexOf(data[i].id)
					
					if(index > -1) {
						corporateData.checkedKeys.splice(index, 1)
					}
				}
				data[i].checked = checked
			}
			
			if(data[i].children && data[i].children.length > 0) {
				const children = data[i].children
				selectAll(children, checked, keys)
			}
		}
	}
	
	const changeMenu = (val:string, obj:any) => {
		if(obj.children && obj.children.length > 0) {
			if(val.length > 0) {
				corporateData.checkedKeys.push(obj.id)
				selectAll(obj.children,true)
			} else {
				const index = corporateData.checkedKeys.indexOf(obj.id)
				if(index > -1) {
					corporateData.checkedKeys.splice(index, 1)
				}
				selectAll(obj.children,false)
			}
		} else {
			if(val.length > 0) {
				obj.checked = true
				corporateData.checkedKeys.push(obj.id)
			} else {
				const index = corporateData.checkedKeys.indexOf(obj.id)
				if(index > -1) {
					corporateData.checkedKeys.splice(index, 1)
				}
				obj.checked = false
			}
		}
	}
	
	const selectMenu = (index:number) => {
		corporateData.listChildren[index].show = !corporateData.listChildren[index].show
	}

	
	const changePasswordShow = () => {
		showPassword.value = !showPassword.value
	}
	
	const changePopup = () => {
		corporateData.showPopup = !corporateData.showPopup
	}
	
</script>

<style lang="scss" scoped>
	.sub-account-add {
		height:100%;
		.password-icon {
			width: 30rpx;
			height:11rpx;
			padding-left:45rpx;
		}
		.password-active-icon {
			width: 30rpx;
			height: 19rpx;
			padding-left:45rpx;
		}
		.bottom-btn {
			padding-bottom: 20rpx;
		}
		.permission {
			padding-top:30rpx;
			padding-bottom:30rpx;
			.left {
				//border-bottom: 1px solid #E5E5E5;
				.left-item {
					padding:30rpx 45rpx 30rpx 30rpx;
					border-top-left-radius: 28rpx;
					border-bottom-left-radius: 28rpx;
					&.active {
						background-color: #F6F5F8;
					}
				}
			}
			.right {
				background-color: #F6F5F8;
				height:450rpx;
				&-item {
					padding:30rpx 0;
					border-bottom: 1px solid #E5E5E5;
					.right-item-box {
						margin:5rpx 30rpx;
					}
					.right-arrow-light {
						width: 12rpx;
						height:22rpx;
						transform: rotate(-90deg);
						&.active {
							transform: rotate(90deg);
						}
					}
				}
				&-item:last-child {
					border-bottom: none;
				}
				&-checkbox {
					
				}
				&-inner {
					padding:15rpx 45rpx;
				}
				
			}
		}
	}
</style>
